<template>
    <a-popup
        ref="popup"
        :popPlacement="popPlacement"
        :getPopModifiersFunc="getPopModifiersFunc"
        :popShown="popShown"
        @update:popShown="$emit('update:popShown', $event)"
        :trigger="trigger"
    >
        <slot></slot>

        <template v-slot:pop>
            <div class="pop-container">
                <div
                    class="tooltip-container"
                    :class="[
                        sharp ? '' : `c-round-${size}`,
                        `c-font-size-${size}`,
                    ]"
                    :style="[
                        {
                            padding: `${sizePackage.space / 2}px ${
                                sizePackage.space
                            }px`,
                        },
                    ]"
                >
                    {{ tips }}
                </div>
                <div class="pop-arrow"></div>
            </div>
        </template>
    </a-popup>
</template>

<style lang="scss" scoped>
@import "../scss/vars";

.pop-container {
    background-color: transparent;
}

.tooltip-container {
    background-color: #333;
    color: #fff;
    max-width: 400px;
}

.pop-arrow {
    width: 10px;
    height: 10px;
    z-index: -1;

    &::before {
        display: block;
        content: " ";
        width: 10px;
        height: 10px;
        background-color: #333;
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
}

.pop-container[data-popper-placement^="top"] {
    .pop-arrow {
        bottom: -5px;
    }
}
.pop-container[data-popper-placement^="bottom"] {
    .pop-arrow {
        top: -5px;
    }
}
.pop-container[data-popper-placement^="left"] {
    .pop-arrow {
        right: -5px;
    }
}
.pop-container[data-popper-placement^="right"] {
    .pop-arrow {
        left: -5px;
    }
}
</style>

<script>
import APopup from './APopup.vue'
import utils from "../common/utils"

export default {
    name: 'ATooltip',
    components: { APopup },
    props: {
        /**
         * 留空表示让组件自行控制弹出框显隐
         */
        popShown: {
            type: Boolean,
            default: null
        },
        /**
         * 对齐到target的位置
         */
        popPlacement: {
            type: String,
            default: 'top'
        },
        size: {
            type: String,
            default: 'm',
        },
        sharp: {
            type: Boolean,
            default: false,
        },
        tips: {
            type: String,
        },
        trigger: {
            type: String,
            default: 'hover'
        },
    },
    computed: {
        sizePackage() {
            return utils.getSizePackageByName(this.size)
        }
    },
    methods: {
        getTargetEl() {
            return this.$refs.popup.getTargetEl()
        },
        getPopEl() {
            return this.$refs.popup.getPopEl()
        },
        getPopModifiersFunc() {
            return [
                {
                    name: 'offset',
                    options: {
                        offset: [0, this.sizePackage.space / 2],
                    }
                },
                {
                    name: 'arrow',
                    options: {
                        element: this.getPopEl().getElementsByClassName('pop-arrow')[0],
                    },
                },
            ]
        },
    }
}
</script>